<template>
	<view v-if="loadshow" class="fullloading" :style="{backgroundColor: bgcolor}">
		<view class="icon-box">
			<u-icon name="loading" custom-prefix="custom-icon" :size="iconSize" color="#888888"></u-icon>
		</view>
		<view class="text" v-if="text" :style="{fontSize:textsize+'rpx',color:textcolor}">{{text}}</view>
		<slot/>
	</view>
</template>
<script>
	export default {
		props: {
			loadicon: {
				type: String,
				default() {
					return ''
				}
			},
			text: {
				type: String,
				default() {
					return ''
				}
			},
			iconSize: {
				type: String,
				default() {
					return '100'
				}
			},
			textcolor: {
				type: String,
				default() {
					return '#000000'
				}
			},
			textsize: {
				type: [Number, String],
				default() {
					return 30
				}
			},
			bgcolor: {
				type: String,
				default() {
					return '#ffffff'
				}
			},
			loadshow: {
				type: Boolean,
				default() {
					return true
				}
			},
		},
		data() {
			return {
				loadingImg: '/static/loading.gif',
				errorImg: ''
			}
		},
		methods: {
		}
	}
</script>
<style scoped>
	@-webkit-keyframes run {
		from {
			-webkit-transform: rotateZ(0);
			transform: rotateZ(0);
		}
	
		to {
			-webkit-transform: rotateZ(360deg);
			transform: rotateZ(360deg);
		}
	}
	
	@keyframes run {
		from {
			-webkit-transform: rotateZ(0);
			transform: rotateZ(0);
		}
			
		to {
			-webkit-transform: rotateZ(360deg);
			transform: rotateZ(360deg);
		}
	}
	.fullloading{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #fff;
		text-align: center;
		z-index: 998;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.icon-box{
		-webkit-animation-name: run;
		animation-name: run;
		-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
		-webkit-animation-duration: 3s;
		animation-duration: 3s;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
	}
	.text{
		margin-top: 20rpx;
	}
</style>